<template>
  <div class="toolbar colorMain">
    <div class="mt-10 mb-10">
      <el-form :inline="true" size="small">
        <el-form-item label="日期筛选"><date-picker v-model="queryFrom.time_range"/></el-form-item>
        <el-form-item label="时段筛选" ><time-interval v-model="queryFrom.interval_type"/></el-form-item>
        <el-form-item label="用户类型" ><user-type v-model="queryFrom.user_type"/></el-form-item>
        <el-form-item label="房间类型" >
          <el-select v-model="queryFrom.room_id" multiple collapse-tags placeholder="请选择">
            <el-option v-for="(item,key) in room" :key="key" :label="item" :value="key"/>
          </el-select>
        </el-form-item>
        <el-form-item label="鱼种类型" >
          <select-all :all-select-list="fishType" v-model="queryFrom.fish_type" />
        </el-form-item>
        <el-form-item label="指定用户">
          <el-input v-model="queryFrom.user_id" placeholder="请输入用户id"></el-input>
        </el-form-item>
        <el-button size="small" type="primary" @click="sendQuery">提交</el-button>
      </el-form>
    </div>
    <div><el-button :loading="excelLoad" icon="el-icon-printer" style="float: right;margin: 0 0 10px 0" size="mini" type="success" @click="downExcel" >导出数据</el-button></div>
    <analyse-table v-if="showTable" :table-data="tableData" :key_mapper="key_mapper" :sortable = "['user_id', 'chn']" :min-width = "160" size="small" @sort-change="sortChange"/>
    <el-pagination :current-page.sync="page" :page-size="size" :total.sync="total" class="mt-10" layout="total, sizes, prev, pager, next, jumper" @current-change="currentChange" @size-change="handleSizeChange"/>
  </div>
</template>
<script>
import { pickTime } from '@/model/DateRange'
import { getFishPumpAnalysis, getFishPumpPreset } from '@/api/table'
import SelectAll from '@/components/SelectAll'
import mixins from '@/model/mixins'

export default {
  name: 'UserStay',
  mixins: [mixins],
  data() {
    return {
      queryFrom: {
        time_range: pickTime,
        user_type: '',
        room_id: [],
        fish_type: [],
        user_id:''
      },
      API: getFishPumpAnalysis,
      showTable: true,
      room:{},
      fishType:[]
    }
  },
  created(){
    this.getFishPumpPreset()
  },
  methods:{
    getFishPumpPreset(){
      getFishPumpPreset().then(res=>{
        console.log('some',res)
        if(res.status===0){
          this.room = res.data.preset.rooms
          this.fishType = res.data.preset.fish_types
          this.fishType = this.objToArr(this.fishType).map(function(item){
            for(let i in item){
              return {
                name: '全选/取消',
                value: i,
                CName: item[i]
              }
            }
          })
          console.log(this.fishType,'666')
        }
      })
    },
    objToArr(obj) {
      var arr = []
      for (let i in obj) {
        let o = {};
        o[i] = obj[i];
        arr.push(o)
      }
      return arr;
    }
  },
  watch: {
    tableData() {
      this.showTable = false
      this.$nextTick(() => (
        this.showTable = true
      ))
    }
  }
}
</script>
